<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <%- include("./component/header.html"); %>
    <style>
        .info-disabled {
            color: #999;
        }

        .info-ok {
            color: green;
        }

        .info-err {
            color: red;
        }
    </style>
</head>
<body>
    <%- include("./component/navbar.html"); %>
    <main class="main">
        <h1>
            <%= headText %>
        </h1>

        <div class="removeAfterScriptLoaded">
            <p>正在准备检测环境，请稍候...</p>
            <p>若长时间无响应请尝试刷新页面</p>
        </div>

        <div id="container" style="visibility: hidden;">
            <input id="checkBtn" type="button" value="检测" onclick="startCheck()">
            <div class="parentNode">
                <div class="childrenNode">
                    <h3 class="title">网络连通性</h3>
                    <span id="onlineStatus" class="info"></span>
                </div>
                <div>
                    <h3 class="title">网络后台状态</h3>
                    后台服务器：<span id="backendStatus" class="info"></span><br>
                    前台服务器：<span id="frontendStatus" class="info"></span>
                </div>
                <div>
                    <h3 class="title">网络数据库状态</h3>
                    <span id="databaseStatus" class="info info-disabled">暂不提供检测</span>
                </div>
                <div>
                    <h3 class="title">服务器时间与本机时间差</h3>
                    <span id="timeOff" class="info">正在计算</span>
                </div>
            </div>
        </div>
    </main>
    <%- include("./component/footer.html"); %>
    <script async="true" src="/assets/javascripts/siteStatus.js"></script>
</body>
</html>